<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="element-plus/index.css" />
		<script src="js/vue.js"></script>
		<script src="element-plus/index.full.js"></script>
	</head>
	<body>
		<div id="app">
			<el-card style="max-width: 500px; margin: 50px auto;">
				<el-form ref="registerForm" label-width="100" :rules="rules" :model="form">
					<el-form-item label="用户名" prop="user">
						<el-input v-model="form.user" placeholder="请输入用户名"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="psw">
						<el-input v-model="form.psw" placeholder="请输入密码" type="password"></el-input>
					</el-form-item>
					<el-form-item label="确认密码" prop="repsw">
						<el-input v-model="form.repsw" placeholder="请确认密码" type="password"></el-input>
					</el-form-item>
					<el-form-item label="邮箱" prop="email">
						<el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
					</el-form-item>
					<el-form-item label="性别" prop="sex">
						<el-radio-group v-model="form.sex">
							<el-radio :value="1">男</el-radio>
							<el-radio :value="2">女</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="兴趣爱好" prop="hobby">
						<el-checkbox-group v-model="form.hobby">
							<el-checkbox value="唱歌">唱歌</el-checkbox>
							<el-checkbox value="跳舞">跳舞</el-checkbox>
							<el-checkbox value="运动">运动</el-checkbox>
							<el-checkbox value="阅读">阅读</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item label="出生日期" prop="birth">
						<el-date-picker v-model="form.birth" value-format="YYYY-MM-DD"
							placeholder="选择日期"></el-date-picker>
					</el-form-item>
					<el-form-item label="城市" prop="city">
						<el-select v-model="form.city" placeholder="选择城市">
							<el-option value="重庆">重庆</el-option>
							<el-option value="广州">广州</el-option>
							<el-option value="上海">上海</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button @click="post" type="primary">注册</el-button>
						<el-button @click="resetForm">重置</el-button>
					</el-form-item>
				</el-form>
			</el-card>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						form: {
							user: '',
							psw: '',
							repsw: '',
							email: '',
							sex: '',
							hobby: [],
							birth: '',
							city: ''
						},
						rules: {
							user: [{
								required: true,
								message: '请输入用户名',
								trigger: 'blur'
							}],
							psw: [{
									required: true,
									message: '请输入密码',
									trigger: 'blur'
								},
								{
									min: 6,
									message: '请输入至少6位密码',
									trigger: 'blur'
								}
							],
							repsw: [{
									required: true,
									message: '请确认密码',
									trigger: 'blur'
								},
								{
									validator: this.confirmPsw,
									trigger: ['change', 'blur']
								}
							],
							email: [{
									required: true,
									message: '请输入邮箱',
									trigger: 'blur'
								},
								{
									type: 'email',
									message: '请输入正确的邮箱格式',
									trigger: ['change', 'blur']
								}
							],
							sex: [{
								required: true,
								message: '请选择性别',
								trigger: 'blur'
							}],
							hobby: [{
								required: true,
								message: '请选择兴趣爱好',
								trigger: 'change'
							}],
							birth: [{
								required: true,
								message: '请选择出生日期',
								trigger: 'change'
							}],
							city: [{
								required: true,
								message: '请选择城市',
								trigger: 'change'
							}]
						}
					};
				},
				methods: {
					post() {
						this.$refs['registerForm'].validate(flag => {
							if (flag) {
								alert('校验成功，提交数据')
							} else {
								alert('未通过校验');
							}
						})
					},
					confirmPsw(rule, value, callback) {
						if (value !== this.form.psw) {
							callback(new Error('两次输入的密码不一致'));
						} else {
							callback();
						}
					}
				}
			}).use(ElementPlus).mount('#app');
		</script>
	</body>
</html>